<template>
  <div class="box6" style="margin-top: 20px;">
    <div class="content6-1" style="position: relative">
      <div class="title">
        多元视图态势
      </div>
      <div class="table-div">
        <div style="width:100%;height: 1610px" ref="chart1"></div>
      </div>
    </div>

  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import { listBedForStatus,listDischarge } from '@/api/system/charts'

  export default {
    data(){
      return{
        chart1:null,
        listBedForStatusDTO_bedType:[],
        listBedForStatusDTO_occupied:[],
        listBedForStatusDTO_reserved:[],
        listBedForStatusDTO_vacant:[],
      }
    },

    mounted(){

    },
    created() {
      this.getBedForStatus()
    },
    methods:{
      initChart1() {
        this.chart1 = echarts.init(this.$refs.chart1, 'macarons')
        this.chart1.setOption({
          tooltip: {
            trigger: 'item',
            textStyle: {  // 设置悬浮窗文字样式
              fontSize: 36  // 悬浮窗文字大小
            }
          },
          legend: {
            top: '1%',
            left: 'center',
            textStyle: {
              fontSize: 28,  // 图例字体大小
              color: 'white' // 图例字体颜色
            }
          },
          series: [
            // 第一个竖直排列的图表
            {
              name:"空闲床位",
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '22%'], // 放置在上方
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: '100%', // 圆角
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 36,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.listBedForStatusDTO_vacant.map((value, index) => ({
                value,
                name: this.listBedForStatusDTO_bedType[index]
              })),
              color: ['#5470c6', '#91CC75', '#fac858', '#EE6666', '#73C0DE', '#FFAE57', '#FF7853', '#36CFC9', '#FEA391', '#F9EC58']
            },
            // 第二个竖直排列的图表
            {
              name:"预约床位",
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '51%'], // 放置在中间
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10, // 圆角
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 36,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.listBedForStatusDTO_reserved.map((value, index) => ({
                value,
                name: this.listBedForStatusDTO_bedType[index]
              })),
              color: ['#5470c6', '#91CC75', '#fac858', '#EE6666', '#73C0DE', '#FFAE57', '#FF7853', '#36CFC9', '#FEA391', '#F9EC58']
            },
            // 第三个竖直排列的图表
            {
              name:"占用床位",
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '80%'], // 放置在下方
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10, // 圆角
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 36,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.listBedForStatusDTO_occupied.map((value, index) => ({
                value,
                name: this.listBedForStatusDTO_bedType[index]
              })),
              color: ['#5470c6', '#91CC75', '#fac858', '#EE6666', '#73C0DE', '#FFAE57', '#FF7853', '#36CFC9', '#FEA391', '#F9EC58']
            }
          ]
        })
      },
      /** 查询床位数量列表 */
      getBedForStatus() {
        listBedForStatus().then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.listBedForStatusDTO_bedType[i] = response.data[i].bedType
            this.listBedForStatusDTO_occupied[i] = response.data[i].occupied
            this.listBedForStatusDTO_reserved[i] = response.data[i].reserved
            this.listBedForStatusDTO_vacant[i] = response.data[i].vacant
          }
          this.initChart1()
        })
      },
    }
  }
</script>

<style>
  .box6 {
    width: 616px;
    height: 1800px;
  }

  .el-table .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;
  }


  .title {
    width: 386px;
    height: 50px;
    font-size: 28px;
    text-align: left;
    line-height: 60px;
    color: white;
    margin-left: 25px;
    margin-top: 10px;
  }

  .content6-1 {
    width: 616px;
    height: 1610px;
    background: url('../../assets/xiehospital/bj  4.png') no-repeat;
    background-size:616px 1610px;
    opacity: 0.9;
    border-radius: 6px;
    padding: 4px 1px;
  }
  .content6-1 table-div{
    width: 100%;
    height: 100%;
  }
</style>
